<template>
	<div class="article">
		<Loading v-if="loading" />
		<template v-if="!loading">
			<div class="article-aside right fadeInRightBig">
				<ul>
					<span class="title">分类管理</span>
					<li v-for="(item, index) in classList" :key="index" @click="getClassArticle(item.id, item.count)">
						<span>{{ item.className }}</span>
						<span>【{{ item.count }}】篇</span>
					</li>
				</ul>

				<ul :style="{ marginTop: '80px' }">
					<span class="title">热门文章推荐</span>
					<li v-for="(item, index) in hotList" :key="index" @click="readDetail(item.id)">{{ item.title }}</li>
				</ul>
			</div>
			<div class="article-articlelist left fadeInLeftBig">
				<blog-list :articleList="articleList" />
			</div>
		</template>
	</div>
</template>

<script>
import { getAllArticle } from "@/api/Article/index";
import { getAllType } from "@/api/Type";
import { getHotArticle } from "@/api/Article";
import blogList from "../../components/blogList";
export default {
	components: { blogList },
	data() {
		return {
			classList: [],
			articleList: [],
			total: null,
			currentPage: 1, //当前是第几页
			pageSize: 5, //一页显示几条数据
			currentArticleSumNum: null, //当前分类文章总数
			typeId: "", //分类id  查看不同分类的文章
			noMore: false, //没有更多数据了
			articleLength: null, //当前分类的数量 通过这个比对文章列表的长度判断数据是否加载完毕了
			hotList: [], //热门文章
			loading: true,
			params: {
				typeId: null,
				currentPage: 1,
				pageSize: 5,
				status: 1,
			},
		};
	},
	methods: {
		handleScroll() {
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			let clientHeight = document.documentElement.clientHeight;
			let scrollHeight = document.documentElement.scrollHeight;
			// // 如果滚动到接近底部，自动加载下一页
			if (scrollTop + clientHeight >= scrollHeight) {
				this.isMore && this.getAllArticle();
				console.log(this.isMore, "继续加载");
			}
		},
		/** 获取分类列表 */
		getClassArticle(typeId, count) {
			this.currentArticleSumNum = count;
			this.params.typeId = typeId;
			this.params.currentPage = 1;
			this.articleList = [];
			this.getAllArticle();
		},
		/** 获取文章列表 */
		async getAllArticle() {
			let res = await getAllArticle(this.params);
			this.loading = false;
			
			const { currentPage } = res.data.pagination;
			currentPage === 1 && (this.articleList = res.data.articles);
			currentPage !== 1 && (this.articleList = [...this.articleList, ...res.data.articles]);
			++this.params.currentPage;
		},
		//获取分类列表
		async getAllType() {
			let res = await getAllType();
			this.classList = res.data;
			this.currentArticleSumNum = res.data[0].count;
			console.log(this.classList);
		},
		getInfo() {
			this.getAllArticle();
			this.getAllType();
		},
		async getHotArticle() {
			const res = await getHotArticle();
			res.code && (this.hotList = res.data);
		},
		readDetail(id) {
			this.$router.push(`article-detail/${id}`);
		},
		changeDate(date) {
			var d = new Date(date);
			return d.getFullYear() + "年" + "-" + (d.getMonth() + 1) + "月" + "-" + d.getDate() + "日";
		},
	},
	created() {
		this.getInfo();
		this.getHotArticle();
	},
	mounted() {
		// 监听滚动事件
		window.addEventListener("scroll", this.handleScroll);
		
	},
	destroyed() {
		window.clearInterval(this.handleScroll);
	},
	computed: {
		isMore: function () {
			console.log(this.currentArticleSumNum > this.articleList.length, "11");
			return this.currentArticleSumNum > this.articleList.length;
		},
	},
	watch:{
		loading(n,o){
			!n && this.$nextTick(()=>{
				this.$cool("left");
				this.$cool("right");
		})
		}
	}
};
</script>
<style lang="scss" scoped>
.article {
	padding-top: 64px;
	width: 100%;
	margin: 20px auto;
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	&-aside {
		width: 25%;
		height: 500px;
		position: sticky;
		top: 30px;
		li {
			overflow: hidden;
			padding: 0 15px;
			height: 50px;
			line-height: 50px;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;

			&:hover {
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}
		}
	}
	&-articlelist {
		width: 70%;
		display: flex;
		flex-direction: column;
		ul {
			min-height: 90vh;
			li {
				cursor: pointer;
				display: flex;
				height: 200px;
				margin: 0px 0px 15px 10px;
				padding: 10px;
				border-radius: 8px;
				transition: all 1s ease 0s;
				border: 1px solid #d2d2d2;
				overflow: hidden;
			}
			.ismore {
				margin-top: 20px;
				text-align: center;
				line-height: 30px;
			}
		}
	}
	.title {
		display: inline-block;
		text-align: center;
		line-height: 40px;
	}
}
</style>
